<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ arr.length }}</strong></span
    >
    <ul class="filters">
      <li>
        <a
          :class="{ selected: 'all' === curType }"
          @click="handlerFn('all')"
          href="javascript:;"
          >全部</a
        >
      </li>
      <li>
        <a
          :class="{ selected: 'no' === curType }"
          href="javascript:;"
          @click="handlerFn('no')"
          >未完成</a
        >
      </li>
      <li>
        <a
          :class="{ selected: 'yes' === curType }"
          href="javascript:;"
          @click="handlerFn('yes')"
          >已完成</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="clearFn">清除已完成</button>
  </footer>
</template>

<script>
/**
 *  需求1：点击底部切换--点谁谁有边框（点谁给谁添加selected类名）
 *  我们可以给三个按钮设置一个标识符：全部-all；未完成-no；已完成-yes；
 *  1、点击谁要保存谁的标识符
 *  2、动态设置class，判断保存起来的标识符和按钮自己的标识符对比，如果相等说明点击了他。
 *
 *
 *  需求2、点击“清除已完成”按钮，清除已完成任务
 * 1、给“清除已完成”按钮绑定点击事件，并声明事件处理函数
 * 2、在事件处理函数中，“子传父”通知父组件清除已完成的数据
 * 3、在父组件中，绑定自定义事件，在事件处理函数中清除已完成数据
 */
export default {
  props: ["arr"],
  data() {
    return {
      curType: "all",
    };
  },
  methods: {
    handlerFn(type) {
      // console.log(type);
      this.curType = type;
      // 子传父，将按钮类型传递给父组件
      this.$emit("sendData", type);
    },
    // 清除已完成
    clearFn() {
      // 子传父，通知父组件清除已完成数据
      this.$emit("clearData");
    },
  },
};
</script>